<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <title>仓库管理系统</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <!-- Bootstrap -->
        <link rel="stylesheet" media="screen" href="css/bootstrap.min.css" />
        <link rel="stylesheet" media="screen" href="css/bootstrap-theme.min.css" />

        <!-- Bootstrap Admin Theme -->
        <link rel="stylesheet" media="screen" href="css/bootstrap-admin-theme.css" />
        <link rel="stylesheet" media="screen" href="css/bootstrap-admin-theme-change-size.css" />

        <!-- Vendors -->
        <link rel="stylesheet" type="text/css" href="vendors/webuploader/webuploader.css"  />
        <!-- (...) -->
        <style type="text/css">
        .bootstrap-admin-panel-content .btn-toolbar {
            margin-bottom: 5px;
        }
        .rack {
            width: 160px;
            height: 52px;
            overflow: auto;
        }
        .rack-col {
            padding-left: 10px;
            float: left;
        }
        .rack-col .list-group {
            margin-bottom: 0;
        }
        .rackview {
            padding: 10px;
            min-height: 20px;
        }
        .rackview h2 {
            text-align: center;
        }
        .userdlg {
            overflow: hidden;;
        }
        .userdlg legend {
            padding: 5px;
        }
        .userdlg .form-group {
            padding-left: 5px;
        }
        .userdlg-bbar button {
            width: 75px;
            margin: 0 0 10px 5px;
        }          
        .viewform {
          width: 500px;
          float:left;
        }
        .images {
          position: absolute;
          right: 20px;
          top: 50px;
          width: 300px;
          height: 300px;      
        }
        #view_images a {
          text-decoration:  none;
          width: 75px;
          padding: 5px;
        }
        #view_images a.selected {
          border: solid 1px #00f;
          padding: 4px;
        }                
        #filePicker {
            display: inline-block;
            line-height: 1.428571429;
            vertical-align: middle;
            margin: 0 12px 0 0;
        }
        #filePicker .webuploader-pick {
            padding: 7px 12px;
            display: block;
        }
        #uploader {
          margin-top: 5px;
        }
        </style>
        
        <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
           <script type="text/javascript" src="js/html5shiv.js"></script>
           <script type="text/javascript" src="js/respond.min.js"></script>
        <![endif]-->
    </head>
    <body class="bootstrap-admin-with-small-navbar">        
        <th:block th:include="template :: header"/>
        
        <div class="container">
            <!-- left, vertical navbar & content -->
            <div class="row">
                <!-- left, vertical navbar -->
                <div class="col-md-2 bootstrap-admin-col-left" th:include="template :: leftnav (current=rack)">
                </div>

                <!-- content -->
                <div class="col-md-10">
                
                    <div class="row">
                        <div class="col-lg-12">
                        
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <div class="text-muted bootstrap-admin-box-title">货架</div>
<!--                                     <div class="pull-right"><span class="badge">1,462</span></div> -->
                                </div>
                                <div class="bootstrap-admin-panel-content">
                                    <div class="row bootstrap-admin-light-padding-bottom" th:each="row : ${list}">
                                        <div class="rack-col" th:each="col : ${row}">
                                            <div class="rack thumbnail">
                                                <div class="list-group" th:attr="style='background-color: ' + ${col.color} + ';'">
                                                    <a href="javascript:void(0);" class="list-group-item"  
                                                    th:attr="data-id=${col.id},data-layers=${col.layers},data-cols=${col.cols},style='background-color: ' + ${col.color} + ';'"><span th:text="${col.id}">货架id</span><span class="badge" th:text="${col.layers}">layers</span></a>
                                                </div>                                                                                       
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>                        
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- footer -->
        <div th:include="template :: footer"></div>

        <!-- 货架信息查看 -->
        <div id="rackdiv" class="rackview"  style="display: none;">
        </div>
        <!-- 库存信息查看 -->
        <div id="viewdiv"  class="userdlg" style="display: none;">
            <div class="viewform">
                <form class="form-horizontal" > 
                  <fieldset>
                      <legend>查看库存</legend>
                      <div class="form-group">
                          <label class="col-sm-3 control-label" >编号</label>
                          <div class="col-sm-8">
                                <p id="view_id" class="form-control-static"></p>                      
                          </div>
                      </div>
                      <th:block th:if="${admin}">    
                      <div class="form-group">
                          <label class="col-sm-3 control-label" >产品编号</label>
                          <div class="col-sm-8">
                                <input class="form-control" id="view_productid" name="productid" type="text"  placeholder="产品编号"/>
                          </div>
                      </div>
                      <div class="form-group">
                          <label class="col-sm-3 control-label" >产品名称</label>
                          <div class="col-sm-8">
                                <input class="form-control" id="view_productname" name="productname" type="text"  placeholder="产品名称"/>
                          </div>
                      </div>
                      <div class="form-group">
                          <label class="col-sm-3 control-label" >生产厂家</label>
                          <div class="col-sm-8">
                              <input class="form-control" id="view_vendor" name="vendor" type="text"  placeholder="生产厂家"/>
                          </div>
                      </div>                        
                      <div class="form-group">
                          <label class="col-sm-3 control-label" >产品图片</label>
                          <div class="col-sm-6">
                                <div id="view_images" class="form-control-static"></div>    
                                <div id="uploader">
                                    <!--用来存放item-->
                                    <div id="fileList" class="uploader-list"></div>
                                    <div class="btns">
                                    <div id="filePicker" >上传图片</div>
                                    <button id="btndel" type="button" class="btn btn-default">删除图片</button>
                                    </div>
                                </div>                                                  
                          </div>
                      </div>                    
                      <div class="form-group">
                          <label class="col-sm-3 control-label" >货架编号</label>
                          <div class="col-sm-8">
                              <input class="form-control" id="view_rackid" name="rackId" type="text"  placeholder="货架编号"/>
                          </div>
                      </div>                      
                      <div class="form-group">
                          <label class="col-sm-3 control-label" >所在层</label>
                          <div class="col-sm-8">
                              <input class="form-control" id="view_layer" name="layer" type="text"  placeholder="存储位置-层"/>       
                          </div>
                      </div>                      
                      <div class="form-group">
                          <label class="col-sm-3 control-label" >所在号</label>
                          <div class="col-sm-8">
                              <input class="form-control" id="view_col" name="col" type="text"  placeholder="存储位置-号"/>       
                          </div>
                      </div>
                      <div class="form-group">
                          <label class="col-sm-3 control-label" for="view_quantity">数量</label>
                          <div class="col-sm-8">
                              <input class="form-control" id="view_quantity" name="quantity" type="text"  placeholder="数量"/>    
                          </div>
                      </div>
                      <div class="userdlg-bbar">
                          <button type="button" class="btn btn-primary">确定</button>
                          <button type="button" class="btn btn-default">取消</button>
                      </div>  
                      </th:block>       
                      <th:block th:unless="${admin}">
                      <div class="form-group">
                          <label class="col-sm-3 control-label" >产品编号</label>
                          <div class="col-sm-8">
                                <p id="view_productid" class="form-control-static"></p>                      
                          </div>
                      </div>
                      <div class="form-group">
                          <label class="col-sm-3 control-label" >产品名称</label>
                          <div class="col-sm-8">
                                <p id="view_productname" class="form-control-static"></p>                      
                          </div>
                      </div>
                      <div class="form-group">
                          <label class="col-sm-3 control-label" >生产厂家</label>
                          <div class="col-sm-8">
                              <p id="view_vendor" class="form-control-static"></p>
                          </div>
                      </div>                      
                      <div class="form-group">
                          <label class="col-sm-3 control-label">产品图片</label>
                          <div class="col-sm-6">
                              <div id="view_images" class="form-control-static"></div>   
                          </div>
                      </div>
                      <div class="form-group">
                          <label class="col-sm-3 control-label" >货架编号</label>
                          <div class="col-sm-8">
                                <p id="view_rackid" class="form-control-static"></p>                      
                          </div>
                      </div>                      
                      <div class="form-group">
                          <label class="col-sm-3 control-label" >所在层</label>
                          <div class="col-sm-8">
                              <p id="view_layer" class="form-control-static"></p>   
                          </div>
                      </div>                      
                      <div class="form-group">
                          <label class="col-sm-3 control-label" >所在号</label>
                          <div class="col-sm-8">
                              <p id="view_col" class="form-control-static"></p>      
                          </div>
                      </div>
                      <div class="form-group">
                          <label class="col-sm-3 control-label" for="view_quantity">数量</label>
                          <div class="col-sm-8">
                              <p id="view_quantity" class="form-control-static"></p>
                          </div>
                      </div>
                      <div class="userdlg-bbar">
                          <button type="button" class="btn btn-primary">确定</button>
                      </div>
                      </th:block>
                  </fieldset>
              </form>        
            </div>
            <div class="images thumbnail">               
            </div>
        </div>


		<script th:inline="javascript">
		/*<![CDATA[*/
		var admin = /*[[${admin}]]*/ false;
		/*]]>*/
		</script>

        <script type="text/javascript" src="vendors/jquery-1.11.3.js"></script>
        <script type="text/javascript" src="js/bootstrap.min.js"></script>
        <script type="text/javascript" src="js/twitter-bootstrap-hover-dropdown.min.js"></script>
        <script type="text/javascript" src="vendors/layer/layer.js"></script>
        <script type="text/javascript" src="vendors/jquery.validate.js"></script>
        <script type="text/javascript" src="vendors/webuploader/webuploader.js"></script>
        <script type="text/javascript" src="js/app/tools.js"></script>
        <script type="text/javascript" src="js/app/home.js"></script>
    </body>
</html>
